<template>
  <div id="app">
    <strong>{{msg}}</strong>
    <button @click="update">update</button>
    <br>
    <strong>{{msgFromLogin}}</strong>
    <button @click="update2">update2</button>
    <br>
    <sph-header></sph-header>
    <div>
      <!--<router-link to="/test/1">to test1 </router-link> <br>-->
      <!--<router-link to="/test/2">to test2 </router-link> <br>-->
      <!--<router-link to="/home">to home </router-link> <br>-->
      <!--<router-link to="/about">to about </router-link> <br>-->

      <a href="javascript:;" @click="toTest1">to test1 </a> <br>
      <a href="javascript:;" @click="toTest2">to test2 </a> <br>
      <a href="javascript:;" @click="toHome">to home </a> <br>
      <a href="javascript:;" @click="toAbout">to about </a> <br>
    </div>
    <hr>
    <button @click="back">back</button>
    <router-view style="color: red"></router-view>
    <sph-footer v-if="!$route.meta.hideFooter"></sph-footer>
  </div>
</template>

<script>
  import header from "components/header.vue"
  import footer from "components/footer.vue"
  import {mapState,mapActions} from "vuex"
  import {getMockUsers} from "api/api"
  export default {
    name: 'App',
    components:{
      "sph-header":header,
      "sph-footer":footer
    },
    methods:{
      ...mapActions(["updateMsg","updateMsgForLogin"]),
      toAbout(){
        this.$router.push("/about")
      },
      toHome(){
        this.$router.push("/home")
      },
      toTest1(){
        this.$router.replace("/test/1")
      },
      toTest2(){
        this.$router.replace("/test/2")
      },
      back(){
        this.$router.go(-1)
      },
      update(){
        //转发action 提交mutation 同步修改state
        this.updateMsg("xxx")
      },
      update2(){
        this.updateMsgForLogin("yyy")
      }
    },
    computed:{
      ...mapState(["msg"]),
      //state:总仓库的state
      ...mapState({msgFromLogin:state=>state.login.msg})
    },
    async mounted() {
       const body = await getMockUsers();
      console.log(body);
    },
  }
</script>

<style scoped>

</style>
